<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        td {
            border-collapse: collapse;
        }

        td {
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">


        class App extends React.Component {

            state = {
                heros: [
                    { id: 1, name: '孙膑', type: '辅助' },
                    { id: 2, name: '小乔', type: '中单' },
                    { id: 3, name: '扁鹊', type: '法师' }
                ]
            }
            render() {
                //解构赋值
                let {heros} = this.state;
                return <div className="container">
                    名字:<input type="text" ref={el => this.name = el} /> 类型: <input ref={el => this.type=el}  type="text" /> <button onClick={this.add}>新增</button>
                    <hr />
                    <table border="1">
                        <thead>
                            <tr><td>ID</td><td>英雄</td><td>类型</td><td></td></tr>
                        </thead>
                        <tbody>
                            {
                                heros.map((item, index) => {
                                    return <tr key={item.id}><td>{item.id}</td><td>{item.name}</td><td>{item.type}</td><td><input type="text" /></td></tr>;
                                })
                            }
                        </tbody>
                    </table>
                </div>
            }

            add = () => {
                //获取值
                let name = this.name.value;
                let type = this.type.value;
                //压入数组
                let {heros} = this.state;
                // heros.unshift({name: name, type: type, id:heros.length + 1});
                //设置
                this.setState({
                    heros: [{name, type, id: heros.length+1},...heros]
                })
            }
        }

        ReactDOM.render(<App />, document.querySelector("#root"));

    </script>


</body>

</html>